<template>
  <div>
    <div class="headtitle">我的书</div>
    <el-button v-if="!storeF" type="primary" size="mini" @click="toStore()"
      >开通书店</el-button
    >

    <div v-else class="main">
      <conSelect></conSelect>
      <div class="orders">
        <div class="title">
          <template v-for="(item, index) in orderStatus">
            <i
              :class="['lable', selected == index ? 'active' : '']"
              @click="clickStatus(index)"
              v-if="item.code != 'more'"
              >{{ item.lable }}</i
            >
            <select
              :class="[selected == index ? 'active' : '']"
              @click="clickStatus(index)"
              v-model="selects"
              placeholder="其他"
              v-else-if="item.code == 'more'"
              class="lable"
            >
              <option
                v-for="ite in item.more"
                :value="ite.code"
                :label="ite.lable"
                :key="ite.lable"
              ></option>
            </select>
          </template>
        </div>
        <filters :pHSearchInfo="HSearchInfo" :pHSList="HSList"></filters>
        <div class="orderLists">
          <div class="head rb">
            <el-button size="medium" type="primary" @click="addBook"
              >添加</el-button
            >
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="findByPage.pageNum"
              :page-sizes="[1, 5, 10, 20]"
              :page-size="findByPage.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
          <myTable2
            ref="myTable2"
            :List="sellBookList"
            :Attr="sellBookAttr"
            @edit="toEdit"
            @refresh="findAll()"
          ></myTable2>
          <myDialog
            ref="myDialog"
            :formInfo="formInfo"
            :formAttr="formAttr"
            @add="toAdd(obj)"
          ></myDialog>
        </div>
      </div>
    </div>
    <storeDialog ref="storeDialog" @refresh="getStoreF()"></storeDialog>
  </div>
</template>

<script>
import { onlyNumOnePoint } from "@/assets/myjs/function.js";
export default {
  data() {
    return {
      total: 0,
      storeF: false,
      findByPage: {
        userId: "",
        pageNum: 1,
        pageSize: 5,
      },
      selects: "",
      selected: 0,
      allselect: false,
      orderStatus: [
        {
          lable: "全部商品",
          value: "books",
          code: "",
          selected: false,
        },
        {
          lable: "未下架",
          value: "",
          code: "",
          selected: false,
        },
        {
          lable: "已下架",
          value: "",
          code: "",
          selected: false,
        },
      ],
      HSList: [
        {
          name: "订单号",
          type: "input",
          vm: "orderNumber",
        },
        {
          name: "书名",
          type: "input",
          vm: "bookName",
        },
        {
          name: "店铺/发布者",
          type: "input",
          vm: " issuer",
        },
        {
          name: "价格",
          type: "twoinput",
          vm: ["Hprice", "Lprice"],
        },
      ],
      HSearchInfo: {
        orderNumber: "",
        bookName: "",
        issuer: "",
        Hprice: "",
        Lprice: "",
      },
      formInfo: {
        // 23-3
        check: false, //
        userId: 0,
        bookId: 0,
        bookName: "",
        typeId: "",
        typeName: "", //
        publisher: "",
        author: "",
        fPrice: 0, //原价
        nPrice: 0, //二手标价
        discount: 0, //折扣
        price: 0, //
        depreciation: 0, //折损
        pubDate: "", //出版日期
        createTime: "", //上架日期
        keyword: "",
        coverPhoto: "",
        isbn: "",
        brief: "", //简介
        quantity: 0, //库存
        sellNum: 0, //销量
        likeNum: 0,
        bookStatus: 1, //1是普通用户上传，5是封面
      },
      formAttr: [
        { name: "书名", attr: "bookName", type: "input", code: "" },
        { name: "封面", attr: "coverPhoto", type: "img", code: "img" },
        { name: "作者", attr: "author", type: "input", code: "" },
        { name: "出版社", attr: "publisher", type: "input", code: "" },
        { name: "简介", attr: "brief", type: "input", code: "" },
        { name: "关键字", attr: "keyword", type: "input", code: "" },
        { name: "出版日期", attr: "pubDate", type: "datetime", code: "" },
        { name: "ISBN", attr: "isbn", type: "input", code: "" },
        { name: "折损", attr: "depreciation", type: "input", code: "float" },
        { name: "原价", attr: "fprice", type: "input", code: "float" },
        { name: "存货", attr: "quantity", type: "input", code: "int" },
        { name: "类型", attr: "typeId", type: "select", code: "bookType" },
        { name: "现价", attr: "nprice", type: "input", code: "float" },
        // { name: "折扣", attr: "discount", type: "input", code: "float" },
        // { name: "现价", attr: "price", type: "show", code: "" },
      ],
      sellBookList: [],
      sellBookAttr: [
        { name: "作者", attr: "author", type: "input", code: "" },
        { name: "出版社", attr: "publisher", type: "input", code: "" },
        { name: "关键字", attr: "keyword", type: "input", code: "" },
        { name: "出版日期", attr: "pubDate", type: "datetime", code: "" },
        { name: "ISBN", attr: "isbn", type: "input", code: "" },
        { name: "存货", attr: "quantity", type: "input", code: "" },
        { name: "销量", attr: "sellNum", type: "input", code: "" },
        { name: "收藏", attr: "likeNum", type: "input", code: "" },
        { name: "类型", attr: "typeId", type: "select", code: "bookType" },
        { name: "原价", attr: "fprice", type: "input", code: "" },
        { name: "现价", attr: "nprice", type: "input", code: "" },
        // { name: "折扣", attr: "discount", type: "input", code: "" },
        // { name: "现价", attr: "price", type: "input", code: "" },
        { name: "简介", attr: "brief", type: "input", code: "" },
      ],
    };
  },
  components: {
    conSelect: () => import("@/components/util/conSelect.vue"),
    filters: () => import("@/components/util/filters.vue"),
    myTable2: () => import("@/components/util/myTable2.vue"),
    myDialog: () => import("@/components/util/myDialog.vue"),
    storeDialog: () => import("@/components/util/baseDialog.vue"),
  },
  created() {
    this.getStoreF();
  },
  mounted() {
    this.formInfo.userId = this.$store.state.user.user.userId;
    this.findByPage.userId = this.formInfo.userId;
    this.findAll();
  },
  methods: {
    getStoreF() {
      this.$axios
        .get(
          "sys/store/getStoreByUserId?userId=" +
            this.$store.state.user.user.userId
        )
        .then(({ data }) => {
          if (data.data) {
            this.storeF = true;
          }
          console.log("created", data);
        });
    },
    clickStatus(index) {
      this.selected = index;
    },
    addBook() {
      this.formInfo = {
        // 23-3
        check: false, //
        userId: 0,
        bookId: 0,
        bookName: "",
        typeId: "",
        typeName: "", //
        publisher: "",
        author: "",
        fPrice: 0, //原价
        nPrice: 0, //二手标价
        discount: 0, //折扣
        price: 0, //
        depreciation: 0, //折损
        pubDate: "", //出版日期
        createTime: "", //上架日期
        keyword: "",
        coverPhoto: "",
        isbn: "",
        brief: "", //简介
        quantity: 0, //库存
        sellNum: 0, //销量
        likeNum: 0,
        bookStatus: 1, //1是普通用户上传，5是封面
      };
      this.$refs.myDialog.changeDialogFormVisible(true);
    },
    toEdit(obj) {
      console.log("sell=>edit", obj);
      this.formInfo = obj;
      this.$refs.myDialog.changeDialogFormVisible(true);
    },
    toAdd(obj) {
      console.log("sell=>toAdd 确定添加", obj);
    },
    findAll() {
      this.$axios
        .post("index/sys/book/getBooksByPage", this.findByPage)
        .then(({ data }) => {
          // console.log("findAllByPage");
          console.log(data);
          this.sellBookList = data.bookInfo;
          this.total = data.total;
        });
    },
    handleSizeChange(val) {
      this.findByPage.pageSize = val;
      this.findAll();
    },
    handleCurrentChange(val) {
      this.findByPage.pageNum = val;
      this.findAll();
    },
    toStore() {
      this.$refs.storeDialog.changeDialogFormVisible(true);
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .headtitle {
    font-size: 24px;
    font-family: "font6";
    margin-bottom: 20px;
    margin-top: 10px;
  }
  .orders {
    margin-top: 20px;
    .title {
      font-size: 12px;
      border-bottom: 2px solid rgb(181, 215, 227);
      .lable {
        z-index: 99;
        padding: 6px 10px;
        line-height: 2;
        margin-right: 10px;
        margin-bottom: 10px;
        background: linear-gradient(rgb(255, 255, 255), rgb(157, 203, 236));
      }
      .active {
        font-size: 16px;
        background: linear-gradient(rgb(157, 203, 236), rgb(255, 255, 255));
      }
      .lable:hover {
        .active;
      }
    }
  }
  .orderLists {
    margin: 0 auto;
    .head {
      line-height: 2;
      margin-right: 10px;
      margin-left: 10px;
      padding: 4px 10px;
      background: rgb(242, 239, 239);
      .right {
        padding-top: 4px;
        .num {
          margin-right: 10px;
          font-size: 10px;
        }
        .borders {
          height: 24px;
          line-height: 20px;
          text-align: center;
          display: inline;
          padding-left: 4px;
          padding-right: 4px;
          border: 1px solid lightgrey;
        }
      }
    }
  }
}
</style>